<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芯链Design</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0/css/bootstrap.css">
    <link rel="stylesheet" href="../css/web_main.css">

    <script src="../js/jQuery3.7.1.js"></script>
    <script src="../bootstrap-5.3.0/js/bootstrap.js"></script>
    <style>
        .modal-xl{
            width: 1040px;
        }
    </style>



</head>
<body class="body">
<div class="nav-box">
    <div class="dl-container-nav">
        <div class="dl-row-sb center">
            <div class=" dl-row center nav-top">
                <img src="../img/logo1.png" alt="" class="logo">
                <div class="nav">
                    <ul class="dl-row">
                        <li class="dl-column center active pc">
                            <div class="nav-icon img-pc"></div>
                            <p>电脑壁纸</p>
                        </li>
                        <li class="dl-column center ph">
                            <div class="nav-icon img-ph"></div>
                            <p>手机壁纸</p>
                        </li>
                        <li class="dl-column center ipad">
                            <div class="nav-icon img-ipad"></div>
                            <p>iPad壁纸</p>
                        </li>
                    </ul>
                </div>
                <div class="search-box">
                    <div class="">
                        <input type="text" class="form-control dl-input" onblur="changeColor()" id="search" placeholder="请输入关键词或图片编码">
                    </div>
                </div>
            </div>
            <div class="dl-row">
                <div class="member dl-row center" data-bs-toggle="modal" data-bs-target="#exampleModalVip"><img src="../img/member.png" alt=""><span>会员</span></div>
                <div class="up dl-row center"><img src="../img/close.png" alt=""><span>开灯</span></div>
            </div>
        </div>

    </div>
</div>
<div class="dl-container">
    <div class="sort-box">
        <ul class="dl-row">
            <li class="active"><a>最新</a></li>
            <li><a>最新</a></li>
            <li><a>最新</a></li>
            <li><a>最新</a></li>
            <li><a>最新</a></li>
            <li><a>最新</a></li>
            <li><a>最新</a></li>
        </ul>
    </div>
    <div class="wallpaper-box">
        <ul class="dl-row pc-wallpaper">
            <li>
                <div class="pc-box" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    <img src="https://thumbnail1.baidupcs.com/thumbnail/79e144679r773be69c35401dc8bf9792?fid=1103409097225-250528-633123029354427&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-Cms44lLJxyb3FRLzMSg6k1VwTr8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
            <li>
                <div class="pc-box">
                    <img src="../img/zancun/pc2.png" alt="" class="pc-main">
                    <div class="top">
                        <ul class="dl-row">
                            <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                            <li class="tag-set"><span>套图</span></li>
                        </ul>
                    </div>
                    <div class="title">
                        <p>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</p>
                    </div>
                </div>

            </li>
        </ul>

    </div>

</div>

<div class="footer">
    <div class="dl-container">
        <div class="dl-row center">
            <div class="left">
                <ul class="link dl-row">
                    <li><a href="">电脑壁纸</a></li>
                    <li><a href="">手机壁纸</a></li>
                    <li><a href="">iPad壁纸</a></li>
                    <li><a href="">关于本站</a></li>
                </ul>
                <div>2022 ~ 2032 © 版权所有 datalife.com.cn 滇ICP备 2021006475 号</div>

            </div>
            <div class="right dl-row" style="margin-right: 30px">
                <div>
                    <h5>联系我们：</h5>
                    <p>微信：lxyttqq</p>
                    <p>邮箱：315401745@qq.com</p>
                </div>
                <img src="../img/code1.png" alt="">
            </div>
            <div class="right dl-row">
                <div>
                    <h5>免责声明：</h5>
                    <p>本站部分图片来源于网络，其版权归属和合法性暂不确定，</br>如有侵权请联系删除。</p>
                </div>
            </div>
        </div>


    </div>

</div>


<!-- Modal -->
<div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body dl-row">

                <div id="carouselExample" class="carousel slide pc-detail">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="dl-column">
                                <img src="https://thumbnail1.baidupcs.com/thumbnail/79e144679r773be69c35401dc8bf9792?fid=1103409097225-250528-633123029354427&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-Cms44lLJxyb3FRLzMSg6k1VwTr8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                                <img src="https://thumbnail1.baidupcs.com/thumbnail/c68628ef1lbf5b4f84071ef082e680f6?fid=1103409097225-250528-89941222083775&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-XXRocav9gAh2Wi2iAMdSszqfc6U%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="dl-column">
                                <img src="https://thumbnail1.baidupcs.com/thumbnail/79e144679r773be69c35401dc8bf9792?fid=1103409097225-250528-633123029354427&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-Cms44lLJxyb3FRLzMSg6k1VwTr8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                                <img src="https://thumbnail1.baidupcs.com/thumbnail/c68628ef1lbf5b4f84071ef082e680f6?fid=1103409097225-250528-89941222083775&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-XXRocav9gAh2Wi2iAMdSszqfc6U%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                            </div>
                        </div>

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <div class="pc-detail-detail">
                    <h5>#23121101-圣诞节游乐场圣诞节游乐场圣诞节游乐场圣诞节游乐场</h5>
                    <ul class="dl-row">
                        <li class="tag-vip"><img src="../img/vip.png" alt=""></li>
                        <li class="tag-set"><span>套图</span></li>
                    </ul>
                    <div class="dl-row start" style="margin:40px 0">
                        <img src="../img/code2.png" alt="" class="code2">
                        <div>
                            <div class="vip-detail">
                                <p>芯链壁纸订阅：</p>
                                <p>①标清会员9.9/年</p>
                                <p>②高清会员（画质4K）29.9/年</p>
                            </div>
                            <div class="d-grid gap-2" style="margin-top: 20px">
                                <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal22">查看大图</button>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>



<div class="modal fade " id="exampleModal22" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body dl-row">

                <div id="carouselExampleIndicators" class="carousel slide pc-big">
                    <div class="carousel-indicators dl-indicators">
                        <div  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
                            <img class="img" src="https://thumbnail1.baidupcs.com/thumbnail/79e144679r773be69c35401dc8bf9792?fid=1103409097225-250528-633123029354427&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-Cms44lLJxyb3FRLzMSg6k1VwTr8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                        </div>
                        <div  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
                            <img class="img" src="https://thumbnail1.baidupcs.com/thumbnail/c68628ef1lbf5b4f84071ef082e680f6?fid=1103409097225-250528-89941222083775&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-XXRocav9gAh2Wi2iAMdSszqfc6U%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                        </div>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="img" src="https://thumbnail1.baidupcs.com/thumbnail/79e144679r773be69c35401dc8bf9792?fid=1103409097225-250528-633123029354427&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-Cms44lLJxyb3FRLzMSg6k1VwTr8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img" src="https://thumbnail1.baidupcs.com/thumbnail/c68628ef1lbf5b4f84071ef082e680f6?fid=1103409097225-250528-89941222083775&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-XXRocav9gAh2Wi2iAMdSszqfc6U%3d&expires=8h&chkbd=0&chkv=0&dp-logid=9168805895936481055&dp-callid=0&time=1702360800&size=c1920_u1080&quality=90&vuk=1103409097225&ft=image&autopolicy=1"  alt="">
                        </div>

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>



            </div>
        </div>
    </div>
</div>


<div class="modal fade member-box" id="exampleModalVip" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">年度会员</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">核销码</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入核销码">
                </div>
                <div class="mb-3">

                    <div class="dl-column center" style="width: 100%">
                        <div class="vip-detail">
                            <p>芯链壁纸订阅：</p>
                            <p>①标清会员9.9/年</p>
                            <p>②高清会员（画质4K）29.9/年</p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label for="exampleFormControlInput1" class="form-label">获取方式：添加站长微信号【lxyttqq】</label>
                        <div style="text-align: center" class="mt-2">
                            <img src="../img/code2.png" alt="" class="code2">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success">确定</button>
            </div>
        </div>
    </div>
</div>


</body>

<script>
    $(function(){



    })



    $(".nav li").click(
        function () {
            $(this).addClass("active").siblings().removeClass("active");
        }
    )
    $(".sort-box li").click(
        function () {
            $(this).addClass("active").siblings().removeClass("active");
        }
    )

    function changeColor() {
        document.getElementById("search").style.color = "#8f8f8f";
    }
</script>
</html>